 <style>
        .file_bg{width:100px; height:auto; overflow:hidden; position:relative; margin:auto; float:left;}
        .file_bg input[type="button"]{ width:100px; height:36px; border-radius:0 4px 4px 0; border:#00B7EE solid 1px; text-align:center; font-size:13px; color:#fff; background:#00B7EE;}
        .file_bg input[type="file"]{width:100px; height:36px; position:absolute; z-index:1; top:0; left:0; opacity:0;}
        .value_name{ width:240px; height:34px; border:#eee solid 1px; border-radius:4px 0 0 4px; margin:auto; padding-left:10px; color:#666; font-size:13px; margin-bottom:20px; float:left;}
        .files_bg{ width:auto; height:auto; padding: 20px; border-radius:4px;  text-align:center; margin:auto; overflow:hidden;}
        .upload_btn{    background: none repeat scroll 0 0 #00B7EE; border:#00B7EE solid 1px;border-radius: 3px; color: #fff; cursor: pointer;font-size: 14px; margin-left: 10px; width:100px; height:36px; float:left}
    </style>
<div id="container" style="padding:20px">
    <form id="form1" class="form-inline" style="margin-bottom: 20px" action="{:U('img/show')}" method="post">
            <div class="form-group">
              <label for="exampleInputName2">姓名</label>
              <input type="text" class="form-control" id="exampleInputName2" placeholder="姓名" name="id_name">
            </div>        
             <div class="form-group" style="margin-left:5px">
              <label for="exampleInputName3">身份证号码</label>
              <input type="text" class="form-control" id="exampleInputName3" placeholder="身份证号码" name="id_card">
            </div>        
            <button type="submit" class="btn btn-default" id="search" style="margin-left:5px">搜索</button>          
        </form>
    
            <form action="{:U('Img/idDown')}" method="post" enctype="multipart/form-data" style="position: absolute;right: 0px;top: 0;">
                <div class="files_bg">
                <input type="text" class="value_name" value="暂未选择文件" readonly="readonly">
                <div class="file_bg">
                    <input type="button" value="请选择文件"><input type="file" name="import">
                </div>
                <input class="upload_btn" type="submit" value="批量下载">
                </div>
        </form>
    
      <table class="table table-condensed table-bordered table-hover">
           <tr id="first_tr">
             <td>姓名</td>
             <td>身份证号码</td>
             <td>身份证正面</td>    
             <td>身份证反面</td>    
             <td>操作</td>  
           </tr>
          <?php if(!empty($result) && is_array($result)):?> 
            <?php foreach ($result as $k=>$v):?>
                  <tr>
                      <td style="text-align: center;vertical-align: middle;">{$v['id_name']}</td>
                      <td style="text-align: center;vertical-align: middle;">{$v['id_card']}</td>
                      <td>
                        <?php if($v['positive'] != null):?>
                          <a href="__PUBLIC__/images/idphoto2/{$v['user_id']}/{$v['positive']}" download="{$v['id_name']}{$v['id_card']}正面"><img src="__PUBLIC__/images/idphoto2/{$v['user_id']}/{$v['positive']}" style="width:480px;height:230px" class="img-thumbnail"></a>
                        <?php else:?>
                          暂无图片
                        <?php endif;?>
                      </td>     
                       <td>
                        <?php if($v['opposite'] != null):?>
                           <a href="__PUBLIC__/images/idphoto2/{$v['user_id']}/{$v['opposite']}" download="{$v['id_name']}{$v['id_card']}反面"><img src="__PUBLIC__/images/idphoto2/{$v['user_id']}/{$v['opposite']}" style="width:480px;height:230px" class="img-thumbnail"></a>
                        <?php else:?>
                          暂无图片
                        <?php endif;?>
                      </td>     
                      <td style="text-align:center;vertical-align:middle"><a href="#" class="del" id_num="{$v['id']}" user_id="{$v['user_id']}" positive="{$v['positive']}" opposite="{$v['opposite']}"><span class="glyphicon glyphicon-trash" style="color:red"></span></a></td>  
             </tr>
             <?php endforeach;?>
           <?php endif;?>  
        </table>
    <div class="page" style="width:500px;margin: 0 auto">{$page}</div>
     <div style="position: fixed;right: 30px;bottom:20px;"><a href="{:U('index/download?type=three')}">下载样本文件</a></div>
      <!--模态框开始-->
          <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">错误提示!</h4>
            </div>
              <div class="modal-body" id="content">

            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>   
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
      <!--模态框结束-->
</div>

<script>
    $(function(){
        $(".del").each(function(){
            $(this).click(function(){
                var tr = $(this).parent().parent();
                var id = $(this).attr('id_num');
                var user_id = $(this).attr('user_id');
                var positive = $(this).attr('positive');
                 var opposite = $(this).attr('opposite');
               $.ajax({
                   type:'GET',
                   url:"<?=U('img/del')?>",
                   data:{id:id,user_id:user_id,positive:positive,opposite:opposite},
                   dataType:'json',
                   success:function(e){
                       if(e.status == 1){
                           tr.fadeOut();
                       }
                   }
               })
        })
        })
        
             $('input[type="file"]').change(function(){
                        $('.value_name').val($('input[type="file"]').val())
                        if($('input[type="file"]').val()==''){
                                $('.value_name').val('暂未选择文件')
                                }
                        })
                $('.upload_btn').click(function(){
                        if($('input[type="file"]').val()==''){
                                $('#content').html('<p>请选择three.xlsx文件!</p>'); 
                                 $('#myModal').modal('show');
                                return false;	
                        }
                        })
        
    })
    </script>